<!--
*@Author: QWP
*@Description: 卡片
*@Date: 2023-06-20 10:49:51
-->
<template>
  <a-card
    v-bind="$attrs"
    :headStyle="headStyle"
    :bodyStyle="{ ...bodyStyle, ...($attrs['bodyStyle'] || {}) }"
    :bordered="false"
    class="u-custom-card">
    <template #extra>
      <slot name="extra"></slot>
    </template>
    <slot></slot>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, reactive, useAttrs, computed } from "vue";
import { useHomeStore } from '@/store'
import { storeToRefs } from 'pinia'
defineOptions({
  name: 'u-card'
})
const attrs = useAttrs();
const { bodyFontSize } = storeToRefs(useHomeStore());

const emits = defineEmits(['titleClick'])

const headStyle = {
  minHeight: '46px',
  padding: "0 20px",
  fontSize: (bodyFontSize.value + 2) + 'px',
  color: "#333",
  fontWeight: 600,
  // fontFamily: "PingFang SC Medium, PingFang SC Medium",
  fontFamily: "Microsoft YaHei",
  borderBottom: 'unset'
}

const bodyStyle = {
  padding: "0 16px 16px",
  maxHeight: attrs['title'] ? 'calc(100% - 44px)' : '100%',
  overflow: 'auto'
}

</script>

<style lang="scss">
.u-custom-card {
  width: 100%;
  box-sizing: border-box;
  box-shadow: unset !important;
  .ant-card-head-title {
    position: relative;
  }
}
</style>